<template>
  <div>
    <van-nav-bar left-text="返回" title="策略管理" right-text="新增＋" left-arrow
                 @click-left="$router.push('/mine/stock')"
                 @click-right="showPopup1 = true"/>
    <van-tabs v-model="queryParams.sector" @change="load">
      <van-tab v-for="item in $types.sectorTypes" :key="item.value" :name="item.value" :title="item.text" />
    </van-tabs>
    <br/>
    <van-row>
      <van-col :span="12">
        <van-tabs type="card" v-model="flagSide" :color="colorMaps[flagSide]" @change="onFlagChange">
          <van-tab v-for="item in $types.flagTypes" :key="item.value" :name="item.value" :title="item.text" />
        </van-tabs>
      </van-col>
      <van-col :span="12">
        <van-tabs type="card" v-model="queryParams.period" color="#1989fa" @change="load">
          <van-tab v-for="item in $types.periodTypes" :key="item.value" :name="item.value" :title="item.text" />
        </van-tabs>
      </van-col>
    </van-row>
    <br/>
    <van-collapse v-model="activeRows" :style="{ height: `${tableHeight}px` , overflow: 'auto'}">
      <van-collapse-item v-for="item in tableData.datas" :key="item.hex_id" :name="item.hex_id">
        <template #default>
          {{ item.description }}
        </template>
        <template #value>
                    <span @click="onSelect(item)" style="color: #1989fa;cursor: pointer;">
                        <van-icon name="edit"/>
                        <span>编辑</span>
                    </span>
          <span @click="onDelete(item)" style="color: #ee0a24;cursor: pointer;">
                        <van-icon name="delete-o"/>
                        <span>删除</span>
                    </span>
        </template>
        <template #title>
                    <span class="title" :style="{ color: item.enabled ? '#1989fa' : '#909399' }">
                        <span>{{ item.sequence }}</span>
                        <span>.</span>
                        <span>{{ item.title }}</span>
                    </span>
        </template>
      </van-collapse-item>
    </van-collapse>
    <pager v-model="queryParams.page" :total="tableData.total" :limit="queryParams.limit"
           :count="tableData.datas.length" @change="load"/>
    <van-popup v-model="showPopup1" position="bottom" :style="{ height: '80%' }">
      <strategy-form v-model="newForm" title="新建策略" :factorList="factorList" @confirm="onSubmit"
                     @cancel="showPopup1 = false"/>
    </van-popup>
    <van-popup v-model="showPopup2" position="bottom" :style="{ height: '80%' }">
      <strategy-form v-model="setForm" title="编辑策略" :factorList="factorList" @confirm="onChange"
                     @cancel="showPopup2 = false"/>
    </van-popup>
  </div>
</template>

<script>
import {Dialog} from 'vant'
import {getOptionsTarget} from '@/utils'

export default {
  components: {
    StrategyForm: () => import('@/components/StrategyForm.vue'),
    Pager: () => import('@/components/Pager.vue')
  },
  computed: {
    tableHeight() {
      return window.innerHeight - 200
    }
  },
  data() {
    return {
      newForm: {
        title: null,
        sequence: 1,
        description: '暂无',
        modules: [],
        autorun: false,
        enabled: false,
        level: 1
      },
      setForm: {
        hex_id: null,
        title: null,
        sequence: 1,
        description: '暂无',
        modules: [],
        enabled: false,
        autorun: false,
        level: 1
      },
      queryParams: {
        page: 1,
        limit: 20,
        order_by: 'sequence',
        sort_direction: 1,
        autorun: null,
        enabled: null,
        sector: 'stock',
        direction: 'long',
        side: 'buy',
        period: 'd'
      },
      flagSide: 'long_buy',
      colorMaps: {
        long_buy: '#ee0a24',
        long_sell: '#07c160',
        short_sell: '#07c160',
        short_buy: '#ee0a24',
      },
      activeRows: [],
      factorList: [],
      moduleList: [],
      showPopup1: false,
      showPopup2: false,
      tableData: {
        total: 0,
        datas: []
      }
    }
  },
  methods: {
    getOptionsTarget: getOptionsTarget,
    load() {
      this.$requests.post('/china_stock/policy/obtain', this.queryParams).then(resp => {
        this.tableData = resp
      })
    },
    onFlagChange(value) {
      let temp = value.split('_')
      this.queryParams.direction = temp[0]
      this.queryParams.side = temp[1]
      this.load()
    },
    getFactorList() {
      this.$requests.post('/china_stock/factor/obtain', {
        page: 1,
        limit: 1000,
        order_by: 'sequence',
        sort_direction: 1,
        enabled: true
      }).then(resp => {
        this.factorList = resp.datas
      })
    },
    onSubmit() {
      let form = Object.assign({
        period: this.queryParams.period,
        sector: this.queryParams.sector,
        direction: this.queryParams.direction,
        side: this.queryParams.side
      }, this.newForm)
      this.$requests.post('/china_stock/policy/create', form).then(resp => {
        if (resp) {
          this.showPopup1 = false
          this.load()
        }
      })
    },
    onChange() {
      this.$requests.post('/china_stock/policy/update', this.setForm).then(resp => {
        if (resp.n) {
          this.showPopup2 = false
          this.load()
        }
      })
    },
    onSelect(item) {
      this.setForm = item
      this.showPopup2 = true
    },
    onDelete(item) {
      Dialog.confirm({
        title: '提示',
        message: `是否删除策略：${item.title}`,
      }).then(() => {
        this.$requests.post('/china_stock/policy/delete', {hex_id: item.hex_id}).then(resp => {
          if (resp.n) {
            this.load()
          }
        })
      })
    },
  },
  mounted() {
    this.getFactorList()
    this.load()
  }
}
</script>

<style scoped>
.title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
}
</style>
